<template>
  <a-sub-menu :key="menuInfo.name" class="const-submenu">
    <template #title>
      <div class="menuListItem">
        <SvgIcon
          class="iconDef"
          :name="menuInfo?.meta?.icon || ''"
          :color="color(selectedKeys[0].includes(menuInfo.path))"
          width="24"
          height="24"
          v-if="menuInfo?.meta?.icon"
        />
        <SvgIcon
          class="iconSelected"
          :name="menuInfo?.meta?.icon || ''"
          :color="'#1890ff'"
          width="24"
          height="24"
          v-if="menuInfo?.meta?.icon"
        />
      </div>
      {{ menuInfo.meta.menuName }}
    </template>
    <template v-for="item in menuInfo.children" :key="item.path">
      <template v-if="!item.children">
        <a-menu-item :key="item.path">
          <RouterLink :to="item.path"> {{ item.meta.menuName }} </RouterLink>
        </a-menu-item>
      </template>
      <template v-else>
        <sub-menu :menu-info="item" :key="item.path" />
      </template>
    </template>
  </a-sub-menu>
</template>

<script lang="ts" setup>
import { useRouteStore } from '@/store/modules/routeMenu';
import { storeToRefs } from 'pinia';
const { selectedKeys } = storeToRefs(useRouteStore());

let color = computed(() => {
  return (val: boolean) => {
    if (val) {
      return '#1890ff';
    } else {
      return '#4C5A67';
    }
  };
});
defineProps(['menuInfo']);
</script>

<style lang="less">
.const-submenu {
  .menuListItem {
    display: flex;
    align-items: center;
    margin-right: 8px;
    background-color: #7fb0ff;
    justify-content: center;
    border-radius: 10px;
    padding: 4px;
  }
  .iconSelected {
    display: none;
  }
  .ant-menu {
    background: transparent !important;
  }
  .ant-menu-submenu-title {
    height: 60px !important;
    line-height: 60px !important;
  }

  .ant-menu-title-content {
    color: rgba(255, 255, 255, 0.65) !important;
  }
}
</style>
